<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Buttons & Icon - Ace Admin</title>
		<meta name="description" content="Common Buttons & Icons" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<!-- basic styles -->
		<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
		<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" />

		<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
		<!--[if IE 7]>
		  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
		<![endif]-->


		<!-- page specific plugin styles -->


		<!-- ace styles -->
		<link rel="stylesheet" href="assets/css/ace.min.css" />
		<link rel="stylesheet" href="assets/css/ace-responsive.min.css" />
		<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
		<!--[if lt IE 9]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->

	</head>

	<body>
		<div class="navbar navbar-inverse">
			<div class="navbar-inner">
				<div class="container-fluid">
					<a class="brand" href="/index"><small><b>THPT Dương Bạch Mai</b></small> </a>
					<ul class="nav ace-nav pull-right">
						<li class="light-blue user-profile">
							<a class="user-menu dropdown-toggle" href="#" data-toggle="dropdown">
								<img alt="Jason's Photo" src="assets/avatars/user.jpg" class="nav-user-photo" />
								<span id="user_info">
									<small>Welcome,</small> Ngon Son
								</span>
								<i class="icon-caret-down"></i>
							</a>
							<ul id="user_menu" class="pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-closer">
								<li><a href="#"><i class="icon-cog"></i> Settings</a></li>
								<li><a href="#"><i class="icon-user"></i> Profile</a></li>
								<li class="divider"></li>
								<li><a href="#"><i class="icon-off"></i> Logout</a></li>
							</ul>
						</li>
					</ul><!--/.ace-nav-->

				</div><!--/.container-fluid-->
			</div><!--/.navbar-inner-->
		</div><!--/.navbar-->
		<div class="container-fluid" id="main-container">
			<a href="#" id="menu-toggler"><span></span></a><!-- menu toggler -->

			<div id="sidebar">
				<ul class="nav nav-list">

					<li class="active">
						<a href="calendar.html">
							<i class="icon-calendar"></i>
							<span>Thời khóa biểu</span>
						</a>
					</li>

					<li>
						<a href="#" class="dropdown-toggle">
							<i class="icon-copy"></i>
							<span>Quản lý tin</span>
							<b class="arrow icon-angle-down"></b>
						</a>
						<ul class="submenu">
							<li><a href="elements.html"><i class="icon-double-angle-right"></i> Elements</a></li>
							<li><a href="buttons.html"><i class="icon-double-angle-right"></i> Buttons & Icons</a></li>
						</ul>
					</li>

					<li>
						<a href="tables.html">
							<i class="icon-list-alt"></i>
							<span>Quản lý loại tin</span>

						</a>
					</li>

					<li>
						<a href="tables.html">
							<i class="icon-sitemap"></i>
							<span>Quản lý lớp học</span>

						</a>
					</li>

					<li>
						<a href="typography.html">
							<i class="icon-book"></i>
							<span>Quản lý môn học</span>

						</a>
					</li>

					<li>
						<a href="form-elements.html">
							<i class="icon-group"></i>
							<span>Quản lý học sinh</span>

						</a>
					</li>

					<li>
						<a href="elements.html">
							<i class="icon-user-md"></i>
							<span>Quản lý giáo viên</span>

						</a>
					</li>

					<li>
						<a href="widgets.html">
							<i class="icon-list-ol"></i>
							<span>Quản lý điểm</span>

						</a>
					</li>

					<li>
						<a href="gallery.html">
							<i class="icon-picture"></i>
							<span>Hình ảnh hoạt động</span>

						</a>
					</li>
				</ul><!--/.nav-list-->
				<div id="sidebar-collapse"><i class="icon-double-angle-left"></i></div>
			</div><!--/#sidebar-->


			<div id="main-content" class="clearfix">

				<div id="breadcrumbs">
					<ul class="breadcrumb">
						<li><i class="icon-home"></i> <a href="#">Home</a><span class="divider"><i class="icon-angle-right"></i></span></li>
						<li><a href="#">UI Elements</a> <span class="divider"><i class="icon-angle-right"></i></span></li>
						<li class="active">Buttons & Icons</li>
					</ul><!--.breadcrumb-->

					<div id="nav-search">
						<form class="form-search">
							<span class="input-icon">
								<input autocomplete="off" id="nav-search-input" type="text" class="input-small search-query" placeholder="Search ..." />
								<i id="nav-search-icon" class="icon-search"></i>
							</span>
						</form>
					</div><!--#nav-search-->
				</div><!--#breadcrumbs-->



				<div id="page-content" class="clearfix">

					<div class="page-header position-relative">
						<h1>Buttons & Icon <small><i class="icon-double-angle-right"></i> Common Buttons & Icons</small></h1>
					</div><!--/page-header-->



					<div class="row-fluid">
						<!-- PAGE CONTENT BEGINS HERE -->

						<div class="row-fluid">
							<h3 class="header smaller lighter green">Application Buttons</h3>
							<p>
								<a href="#" class="btn btn-app radius-4">
									<i class="icon-cog"></i>
									Default
									<span class="badge badge-pink">+3</span>
								</a>

								<a href="#" class="btn btn-app btn-primary no-radius">
									<i class="icon-edit"></i>
									Edit
									<span class="badge badge-warning badge-right">11</span>
								</a>

								<a href="#"  class="btn btn-app btn-success">
									<i class="icon-refresh"></i>
									Reload
								</a>

								<button class="btn btn-app btn-warning">
									<i class="icon-undo"></i>
									Undo
								</button>

								<a href="#" class="btn btn-app btn-info btn-small no-radius">
									<i class="icon-envelope"></i>
									Mailbox
									<span class="label label-inverse arrowed-in">6+</span>
								</a>

								<button class="btn btn-app btn-danger btn-small">
									<i class="icon-trash"></i>
									Delete
								</button>

								<button class="btn btn-app btn-purple btn-small">
									<i class="icon-cloud-upload"></i>
									Upload
								</button>

								<button class="btn btn-app btn-pink btn-small">
									<i class="icon-share-alt"></i>
									Share
								</button>

								<button class="btn btn-app btn-inverse btn-mini">
									<i class="icon-lock"></i>
									Lock
								</button>

								<button class="btn btn-app btn-grey btn-mini radius-4">
									<i class="icon-save"></i>
									Save
									<span class="badge badge-transparent"><i class="light-red icon-asterisk"></i></span>
								</button>

								<button class="btn btn-app btn-light btn-mini">
									<i class="icon-print"></i>
									Print
								</button>


								<a href="#" class="btn btn-app btn-yellow btn-mini">
									<i class="icon-shopping-cart"></i>
									Shop
								</a>

							</p>
						</div>


						<div class="row-fluid">

							<div class="span6">
								<h3 class="header smaller lighter purple">Default Buttons</h3>
								<p>
									<button class="btn">Default </button>
									<button class="btn btn-primary">Primary</button>
									<button class="btn btn-info">Info</button>
									<button class="btn btn-success">Success</button>
								</p>
								<p>
									<button class="btn btn-warning">Warning</button>
									<button class="btn btn-danger">Danger</button>
									<button class="btn btn-inverse">Inverse</button>
									<button class="btn btn-pink">Pink</button>
								</p>
								<p>
									<button class="btn btn-purple">Purple</button>
									<button class="btn btn-yellow">Yellow</button>
									<button class="btn btn-grey">Grey</button>
									<button class="btn btn-light">Light</button>
									<button class="btn-link">Link</button>
								</p>

								<h3 class="header smaller lighter green">Button with Icons</h3>
								<p>
									<button class="btn"><i class="icon-pencil"></i> Default </button>
									<button class="btn btn-primary"><i class="icon-beaker"></i> Primary</button>
									<button class="btn btn-info">Info <i class="icon-print icon-on-right"></i></button>
								</p>
								<p>
									<button class="btn btn-large btn-success"><i class="icon-ok"></i> Success</button>
									<button class="btn btn-small btn-warning"><i class="icon-fire"></i> Warning</button>
									<button class="btn btn-mini btn-danger"><i class="icon-bolt"></i> Danger <i class="icon-arrow-right  icon-on-right"></i></button>
								</p>
								<p>
									<button class="btn btn-info"><i class="icon-signal icon-3x icon-only"></i></button>
									<button class="btn btn-warning btn-mini"><i class="icon-wrench icon-2x icon-only"></i></button>
									<button class="btn btn-danger btn-small"><i class="icon-reply icon-2x icon-only"></i></button>
									<button class="btn btn-grey btn-large"><i class="icon-trash icon-4x icon-only"></i></button>
								</p>

							</div><!--/span-->

							<div class="span6">
								<h3 class="header smaller lighter red">Button Sizing</h3>
								<p>
									<button class="btn btn-minier btn-yellow">Minier</button>
									<button class="btn btn-mini">Mini</button>
									<button class="btn btn-small btn-primary">Small</button>
									<button class="btn btn-info">Default</button>
									<button class="btn btn-large btn-success">Large Size</button>
								</p>

								<p>
									<button class="btn btn-warning btn-large">Large Size</button>
									<button class="btn btn-danger">Default</button>
									<button class="btn btn-small btn-inverse">Small</button>
									<button class="btn btn-mini btn-pink">Pink</button>
									<button class="btn btn-minier btn-purple">Purple</button>
								</p>

								<h3 class="header smaller lighter grey">Disabled Buttons</h3>
								<p>
									<button class="btn disabled">Default </button>
									<button class="btn disabled btn-primary">Primary</button>
									<button class="btn disabled btn-info">Info</button>
									<button class="btn disabled btn-success">Success</button>
								</p>
								<hr />
								<p>
									<button class="btn btn-danger btn-block">Block Button</button>
								</p>

							</div><!--/span-->

						</div><!--/row-->


						<hr />


						<div class="row-fluid">

							<div class="span6">
								<h3 class="header smaller lighter blue">Button Groups</h3>
								<p>
								<div class="btn-group">
									<button class="btn">1</button>
									<button class="btn">2</button>
									<button class="btn">3</button>
								</div>

								<p>
								<div class="btn-toolbar">
									<div class="btn-group">
										<button class="btn btn-light">1</button>
										<button class="btn btn-light">2</button>
										<button class="btn btn-light">3</button>
										<button class="btn btn-light">4</button>
									</div>
									<div class="btn-group">
										<button class="btn">5</button>
										<button class="btn">6</button>
										<button class="btn">7</button>
									</div>
									<div class="btn-group">
										<button class="btn btn-grey">8</button>
									</div>
								</div>

								<p>
								<div class="btn-group btn-group-vertical">
									<button class="btn" type="button"><i class="icon-only icon-align-left"></i></button>
									<button class="btn" type="button"><i class="icon-only icon-align-center"></i></button>
									<button class="btn" type="button"><i class="icon-only icon-align-right"></i></button>
									<button class="btn" type="button"><i class="icon-only icon-align-justify"></i></button>
								</div>

								<div class="space-6"></div>

								<p>
									<button id="loading-btn" type="button" class="btn btn-success" data-loading-text="Loading...">Loading state</button>
									<button type="button" class="btn btn-primary" data-toggle="button" >Single Toggle</button>

									<button type="button" class="btn btn-small btn-danger" data-toggle="button" >Small</button>
									<button type="button" class="btn btn-mini btn-info" data-toggle="button" >Mini</button>


								<p>
								<div>
									<span>Checkbox: &nbsp;</span>
									<div data-toggle="buttons-checkbox" class="btn-group">
										<button class="btn btn-small" type="button"><i class="icon-only icon-bold"></i></button>
										<button class="btn btn-small" type="button"><i class="icon-only icon-italic"></i></button>
										<button class="btn btn-small" type="button"><i class="icon-only icon-underline"></i></button>
									</div>
								</div>


								<p>
								<div>
									<span>Radio: &nbsp;</span>
									<div data-toggle="buttons-radio" class="btn-group">
										<button class="btn btn-primary" type="button"><i class="icon-only icon-align-left"></i></button>
										<button class="btn btn-primary" type="button"><i class="icon-only icon-align-center"></i></button>
										<button class="btn btn-primary" type="button"><i class="icon-only icon-align-right"></i></button>
									</div>
									<button class="btn btn-primary" type="button" data-toggle="button"><i class="icon-only icon-align-justify"></i></button>
								</div>

							</div><!--/span-->

							<div class="span6">
								<h3 class="header smaller lighter green">Button Dropdown</h3>
								<p>
								<div class="btn-toolbar">
									<div class="btn-group">
										<button data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="caret"></span></button>
										<ul class="dropdown-menu">
											<li><a href="#">Action</a></li>
											<li><a href="#">Another action</a></li>
											<li><a href="#">Something else here</a></li>
											<li class="divider"></li>
											<li><a href="#">Separated link</a></li>
										</ul>
									</div><!-- /btn-group -->
									<div class="btn-group">
										<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Action <i class="icon-angle-down icon-on-right"></i></button>
										<ul class="dropdown-menu">
											<li><a href="#">Action</a></li>
											<li><a href="#">Another action</a></li>
											<li><a href="#">Something else here</a></li>
											<li class="divider"></li>
											<li><a href="#">Separated link</a></li>
										</ul>
									</div><!-- /btn-group -->
									<div class="btn-group">
										<button data-toggle="dropdown" class="btn btn-small btn-danger dropdown-toggle">Danger <i class="icon-angle-down icon-on-right"></i></button>
										<ul class="dropdown-menu">
											<li><a href="#">Action</a></li>
											<li><a href="#">Another action</a></li>
											<li><a href="#">Something else here</a></li>
											<li class="divider"></li>
											<li><a href="#">Separated link</a></li>
										</ul>
									</div><!-- /btn-group -->
								</div>


								<p>
								<div class="btn-toolbar">
									<div class="btn-group">
										<button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">Warning <span class="caret"></span></button>
										<ul class="dropdown-menu">
											<li><a href="#">Action</a></li>
											<li><a href="#">Another action</a></li>
											<li><a href="#">Something else here</a></li>
											<li class="divider"></li>
											<li><a href="#">Separated link</a></li>
										</ul>
									</div><!-- /btn-group -->
									<div class="btn-group">
										<button data-toggle="dropdown" class="btn btn-success btn-large dropdown-toggle">Success large <i class="icon-angle-down icon-on-right"></i></button>
										<ul class="dropdown-menu">
											<li><a href="#">Action</a></li>
											<li><a href="#">Another action</a></li>
											<li><a href="#">Something else here</a></li>
											<li class="divider"></li>
											<li><a href="#">Separated link</a></li>
										</ul>
									</div><!-- /btn-group -->
									<div class="btn-group">
										<button data-toggle="dropdown" class="btn btn-info btn-small dropdown-toggle">Info small <span class="caret"></span></button>
										<ul class="dropdown-menu">
											<li><a href="#">Action</a></li>
											<li><a href="#">Another action</a></li>
											<li><a href="#">Something else here</a></li>
											<li class="divider"></li>
											<li><a href="#">Separated link</a></li>
										</ul>
									</div><!-- /btn-group -->
									<div class="btn-group">
										<button data-toggle="dropdown" class="btn btn-inverse btn-mini dropdown-toggle">Inverse mini <span class="caret"></span></button>
										<ul class="dropdown-menu">
											<li><a href="#">Action</a></li>
											<li><a href="#">Another action</a></li>
											<li><a href="#">Something else here</a></li>
											<li class="divider"></li>
											<li><a href="#">Separated link</a></li>
										</ul>
									</div><!-- /btn-group -->
								</div>

								<hr />
								<p>
								<div class="btn-toolbar">
									<div class="btn-group">
										<button class="btn">Action</button>
										<button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
										<ul class="dropdown-menu">
											<li><a href="#">Action</a></li>
											<li><a href="#">Another action</a></li>
											<li><a href="#">Something else here</a></li>
											<li class="divider"></li>
											<li><a href="#">Separated link</a></li>
										</ul>
									</div><!-- /btn-group -->
									<div class="btn-group">
										<button class="btn btn-small btn-primary">Some Action</button>
										<button data-toggle="dropdown" class="btn btn-small btn-primary dropdown-toggle"><i class="icon-angle-down"></i></button>
										<ul class="dropdown-menu">
											<li><a href="#">Action</a></li>
											<li><a href="#">Another action</a></li>
											<li><a href="#">Something else here</a></li>
											<li class="divider"></li>
											<li><a href="#">Separated link</a></li>
										</ul>
									</div><!-- /btn-group -->
									<div class="btn-group dropup">
										<button class="btn btn-mini btn-danger">Danger</button>
										<button data-toggle="dropdown" class="btn btn-mini btn-danger dropdown-toggle"><span class="caret"></span></button>
										<ul class="dropdown-menu">
											<li><a href="#">Action</a></li>
											<li><a href="#">Another action</a></li>
											<li><a href="#">Something else here</a></li>
											<li class="divider"></li>
											<li><a href="#">Separated link</a></li>
										</ul>
									</div><!-- /btn-group -->

									<p>
									<div class="btn-group">
										<button class="btn btn-large btn-warning">Warning</button>
										<button data-toggle="dropdown" class="btn btn-large btn-warning dropdown-toggle"><span class="caret"></span></button>
										<ul class="dropdown-menu">
											<li><a href="#">Action</a></li>
											<li><a href="#">Another action</a></li>
											<li><a href="#">Something else here</a></li>
											<li class="divider"></li>
											<li><a href="#">Separated link</a></li>
										</ul>
									</div><!-- /btn-group -->
									<div class="btn-group">
										<button class="btn btn-success">Success</button>
										<button data-toggle="dropdown" class="btn btn-success dropdown-toggle"><span class="caret"></span></button>
										<ul class="dropdown-menu">
											<li><a href="#">Action</a></li>
											<li><a href="#">Another action</a></li>
											<li><a href="#">Something else here</a></li>
											<li class="divider"></li>
											<li><a href="#">Separated link</a></li>
										</ul>
									</div><!-- /btn-group -->
									<div class="btn-group">
										<button class="btn btn-info">Info</button>
										<button data-toggle="dropdown" class="btn btn-info dropdown-toggle"><span class="caret"></span></button>
										<ul class="dropdown-menu">
											<li><a href="#">Action</a></li>
											<li><a href="#">Another action</a></li>
											<li><a href="#">Something else here</a></li>
											<li class="divider"></li>
											<li><a href="#">Separated link</a></li>
										</ul>
									</div><!-- /btn-group -->

									<p>
									<div class="btn-group">
										<button class="btn btn-inverse">Inverse</button>
										<button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle"><span class="caret"></span></button>
										<ul class="dropdown-menu">
											<li><a href="#">Action</a></li>
											<li><a href="#">Another action</a></li>
											<li><a href="#">Something else here</a></li>
											<li class="divider"></li>
											<li><a href="#">Separated link</a></li>
										</ul>
									</div><!-- /btn-group -->
								</div>


							</div><!--/span-->

						</div><!--/row-->


						<hr />


						<div class="row-fluid">
							<div class="span6">
								<h3 class="header smaller lighter green">Lables & Badges</h3>
								<p>
									<span class="label">Default</span>
									<span class="label label-success arrowed">Success</span>
									<span class="label label-warning">Warning</span>
									<span class="label label-important arrowed-in">Important</span>
									<span class="label label-info arrowed-in-right arrowed">Info</span>
									<span class="label label-inverse">Inverse</span>
								</p>
								<p>
									<span class="badge">1</span>
									<span class="badge badge-success">2</span>
									<span class="badge badge-warning">4</span>
									<span class="badge badge-important">6</span>
									<span class="badge badge-info">8</span>
									<span class="badge badge-inverse">10</span>
								</p>
								<p>
									<span class="label label-large label-pink arrowed-right">Larger</span>
									<span class="label label-large label-yellow arrowed-in">Yellow</span>
									<span class="label label-large label-purple">Purple</span>
									<span class="label label-large label-grey arrowed-in-right arrowed-in">Grey</span>
									<span class="label label-large label-light arrowed-in-right">Light</span>
								</p>


							</div><!--/span-->

							<div class="span6">
								<h3 class="header smaller lighter red">Pagination</h3>
								<p>
								<div class="pagination">
									<ul>
										<li class="disabled"><a href="#"><i class="icon-double-angle-left"></i></a></li>
										<li class="active"><a href="#">1</a></li>
										<li><a href="#">2</a></li>
										<li><a href="#">3</a></li>
										<li><a href="#">4</a></li>
										<li><a href="#">5</a></li>
										<li><a href="#"><i class="icon-double-angle-right"></i></a></li>
									</ul>
								</div>


								<p>
								<ul class="pager">
									<li class="previous"><a href="#">&larr; Older</a></li>
									<li class="next"><a href="#">Newer &rarr;</a></li>
								</ul>


							</div><!--/span-->
						</div><!--/row-->


						<hr />

						<div class="row-fluid">
							<div class="row-fluid">
								<h3 class="header smaller lighter blue">FontAwesome Icons <small><a href="http://fortawesome.github.com/Font-Awesome/" target="_blank">(see all icons <i class="icon-external-link"></i>)</a> </small></h3>
							</div>

							<div class="row-fluid">
								<div class="span3">
									<ul class="unstyled the-icons">
										<li><i class="icon-adjust"></i> icon-adjust</li>
										<li><i class="icon-asterisk"></i> icon-asterisk</li>
										<li><i class="icon-ban-circle"></i> icon-ban-circle</li>
										<li><i class="icon-bar-chart"></i> icon-bar-chart</li>
										<li><i class="icon-barcode"></i> icon-barcode</li>
										<li><i class="icon-beaker"></i> icon-beaker</li>
										<li><i class="icon-beer"></i> icon-beer</li>
										<li><i class="icon-bell"></i> icon-bell</li>
										<li><i class="icon-bell-alt"></i> icon-bell-alt</li>
										<li><i class="icon-bolt"></i> icon-bolt</li>
										<li><i class="icon-book"></i> icon-book</li>
										<li><i class="icon-bookmark"></i> icon-bookmark</li>
										<li><i class="icon-bookmark-empty"></i> icon-bookmark-empty</li>
										<li><i class="icon-briefcase"></i> icon-briefcase</li>
										<li><i class="icon-bullhorn"></i> icon-bullhorn</li>
										<li><i class="icon-calendar"></i> icon-calendar</li>
										<li><i class="icon-camera"></i> icon-camera</li>
										<li><i class="icon-camera-retro"></i> icon-camera-retro</li>
										<li><i class="icon-certificate"></i> icon-certificate</li>
									</ul>
								</div>

								<div class="span3">
									<ul class="unstyled the-icons">
										<li><i class="icon-check"></i> icon-check</li>
										<li><i class="icon-check-empty"></i> icon-check-empty</li>
										<li><i class="icon-circle"></i> icon-circle</li>
										<li><i class="icon-circle-blank"></i> icon-circle-blank</li>
										<li><i class="icon-cloud"></i> icon-cloud</li>
										<li><i class="icon-cloud-download"></i> icon-cloud-download</li>
										<li><i class="icon-cloud-upload"></i> icon-cloud-upload</li>
										<li><i class="icon-coffee"></i> icon-coffee</li>
										<li><i class="icon-cog"></i> icon-cog</li>
										<li><i class="icon-cogs"></i> icon-cogs</li>
										<li><i class="icon-comment"></i> icon-comment</li>
										<li><i class="icon-comment-alt"></i> icon-comment-alt</li>
										<li><i class="icon-comments"></i> icon-comments</li>
										<li><i class="icon-comments-alt"></i> icon-comments-alt</li>
										<li><i class="icon-credit-card"></i> icon-credit-card</li>
										<li><i class="icon-dashboard"></i> icon-dashboard</li>
										<li><i class="icon-desktop"></i> icon-desktop</li>
										<li><i class="icon-download"></i> icon-download</li>
										<li><i class="icon-download-alt"></i> icon-download-alt</li>
									</ul>
								</div>

								<div class="span3">
									<ul class="unstyled the-icons">
										<li><i class="icon-edit"></i> icon-edit</li>
										<li><i class="icon-envelope"></i> icon-envelope</li>
										<li><i class="icon-envelope-alt"></i> icon-envelope-alt</li>
										<li><i class="icon-exchange"></i> icon-exchange</li>
										<li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
										<li><i class="icon-external-link"></i> icon-external-link</li>
										<li><i class="icon-eye-close"></i> icon-eye-close</li>
										<li><i class="icon-eye-open"></i> icon-eye-open</li>
										<li><i class="icon-facetime-video"></i> icon-facetime-video</li>
										<li><i class="icon-fighter-jet"></i> icon-fighter-jet</li>
										<li><i class="icon-film"></i> icon-film</li>
										<li><i class="icon-filter"></i> icon-filter</li>
										<li><i class="icon-fire"></i> icon-fire</li>
										<li><i class="icon-flag"></i> icon-flag</li>
										<li><i class="icon-folder-close"></i> icon-folder-close</li>
										<li><i class="icon-folder-open"></i> icon-folder-open</li>
										<li><i class="icon-folder-close-alt"></i> icon-folder-close-alt</li>
										<li><i class="icon-folder-open-alt"></i> icon-folder-open-alt</li>
										<li><i class="icon-food"></i> icon-food</li>
									</ul>
								</div>

								<div class="span3">
									<ul class="unstyled the-icons">
										<li><i class="icon-gift"></i> icon-gift</li>
										<li><i class="icon-glass"></i> icon-glass</li>
										<li><i class="icon-globe"></i> icon-globe</li>
										<li><i class="icon-group"></i> icon-group</li>
										<li><i class="icon-hdd"></i> icon-hdd</li>
										<li><i class="icon-headphones"></i> icon-headphones</li>
										<li><i class="icon-heart"></i> icon-heart</li>
										<li><i class="icon-heart-empty"></i> icon-heart-empty</li>
										<li><i class="icon-home"></i> icon-home</li>
										<li><i class="icon-inbox"></i> icon-inbox</li>
										<li><i class="icon-info-sign"></i> icon-info-sign</li>
										<li><i class="icon-key"></i> icon-key</li>
										<li><i class="icon-leaf"></i> icon-leaf</li>
										<li><i class="icon-laptop"></i> icon-laptop</li>
										<li><i class="icon-legal"></i> icon-legal</li>
										<li><i class="icon-lemon"></i> icon-lemon</li>
										<li><i class="icon-lightbulb"></i> icon-lightbulb</li>
										<li><i class="icon-lock"></i> icon-lock</li>
										<li><i class="icon-unlock"></i> icon-unlock</li>
									</ul>
								</div>
							</div>

						</div>

						<!-- PAGE CONTENT ENDS HERE -->
					</div><!--/row-->

				</div><!--/#page-content-->


				<div id="ace-settings-container">
					<div class="btn btn-app btn-mini btn-warning" id="ace-settings-btn">
						<i class="icon-cog"></i>
					</div>
					<div id="ace-settings-box">
						<div>
							<div class="pull-left">
								<select id="skin-colorpicker" class="hidden">
									<option data-class="default" value="#438EB9">#438EB9</option>
									<option data-class="skin-1" value="#222A2D">#222A2D</option>
									<option data-class="skin-2" value="#C6487E">#C6487E</option>
									<option data-class="skin-3" value="#D0D0D0">#D0D0D0</option>
								</select>
							</div>
							<span>&nbsp; Choose Skin</span>
						</div>
						<div><input type="checkbox" class="ace-checkbox-2" id="ace-settings-header" /><label class="lbl" for="ace-settings-header"> Fixed Header</label></div>
						<div><input type="checkbox" class="ace-checkbox-2" id="ace-settings-sidebar" /><label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label></div>
					</div>
				</div><!--/#ace-settings-container-->


			</div><!-- #main-content -->


		</div><!--/.fluid-container#main-container-->




		<a href="#" id="btn-scroll-up" class="btn btn-small btn-inverse">
			<i class="icon-double-angle-up icon-only"></i>
		</a>


		<!-- basic scripts -->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery-1.9.1.min.js'>\x3C/script>");
		</script>

		<script src="assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->


		<!-- ace scripts -->
		<script src="assets/js/ace-elements.min.js"></script>
		<script src="assets/js/ace.min.js"></script>


		<!-- inline scripts related to this page -->

		<script type="text/javascript">
			$(function() {
				$('#loading-btn').on('click', function() {
					var btn = $(this);
					btn.button('loading')
					setTimeout(function() {
						btn.button('reset')
					}, 2000)
				});
			})

		</script>

	</body>
</html>
